<template>
	<view class="page">
		<video :src="videoSrc" class="video"></video>
		<view class="divider"></view>
		<view class="poster-container">
			<image class="poster" :src="posterImage" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
import { getShowNginxPicUrl } from "@/utils/settings"
import { getShowImage } from "@/utils"

export default {
	methods: { getShowNginxPicUrl },
	data() {
		return {
			posterImage: "",
			videoSrc: "",
		}
	},
	onLoad(query) {
		this.posterImage = getShowImage(decodeURIComponent(query.posterImage))
		this.videoSrc = getShowImage(decodeURIComponent(query.videoUrl))
	}
}
</script>

<style lang="scss" scoped>
.page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	> .video {
		width: 100%;
	}
	> .divider {
		height: 20rpx;
		background: white;
	}
	> .poster-container {
		height: 0;
		flex: 1;
		overflow: auto;
		> .poster {
			width: 100%;
		}
	}
}
</style>
